<template>
  <!-- 页面布局card通用组件 -->
  <PageCard>
    <!-- 头部工具栏 -->
    <ToolBar>
      <el-row :gutter="24">
          <el-col :span="24">
            <el-button v-show="$btnPermission.verify('GoodsCatalogAdd')" type="primary" :loading="loading" @click="addGoodsCatalog">新增</el-button>
          </el-col>
        </el-row>
    </ToolBar>

    <!-- 树形table表格 -->
    <TreePage :tree-datas.sync="goodsCatalogTreeDatas" :columns.sync="columns" :default-expand-all="false"></TreePage>

    <AddGoodsCatalog ref="addGoodsCatalog" :title.sync="addCatalogConfig.title" :rowId.sync="addCatalogConfig.rowId" :parentId.sync="addCatalogConfig.parentId" :showDialog.sync="addCatalogConfig.showDialog" @reloadData="loadTreeData"/>
  </PageCard>
</template>
<script>
import PageCard from '@/components/PageCard/index.vue'
import ToolBar from '@/components/ToolBar/index.vue'
import TreePage from '@/components/TreePage/index.vue'
import AddGoodsCatalog from './components/addCatalog'

import { goodsCatalogTreeList, goodsCatalogDelete } from '@/api/goods-catalog'

export default {
  name: 'PageMenu',
  components: {
    PageCard,
    ToolBar,
    TreePage,
    AddGoodsCatalog
  },
  data(){
    return {
      loading: false,
      goodsCatalogTreeDatas: [],
      columns:[{
        title: '名称',
        name: 'catalogName',
        align: 'center',
        width: 150
      }, {
        title: '排序值',
        name: 'sort',
        align: 'center',
        width: 100
      }, {
        title: '启用状态',
        name: 'isEnabled',
        width: 150,
        align: 'center',
        select: true,
        options: this.$config.ENABLED_STATUS
      }, {
        title: '操作',
        name: 'operate',
        width: 200,
        operate: [{
          name: '添加下级',
          permission: 'AddGoodsCatalogNext',
          fun: this.addNext
        }, {
          name: '编辑',
          permission: 'editGoodsCatalog',
          fun: this.edit,
          customStyle: {
            "margin-left": "10px"
          }
        }, {
          name: '删除',
          confirm: true,
          message: '确定删除选择的数据吗?',
          permission: 'deleteGoodsCatalog',
          fun: this.delete,
          customStyle: {
            "margin-left": "10px"
          }
        }]
      }],
      addCatalogConfig: {
        title: '',
        rowId: '',
        parentId: 0,
        showDialog: false
      }
    }
  },
  created() {
    // 加载数据
    this.loadTreeData()
  },
  methods: {
    // 请求获取数据
    async loadTreeData(){
      const res = await goodsCatalogTreeList()
      this.goodsCatalogTreeDatas = res.data
    },

    // 新增
    addGoodsCatalog(){
      this.addCatalogConfig.showDialog = true
      this.addCatalogConfig.title = '新增'
    },

    // 添加下级
    addNext(row) {
      if(!row) return;

      this.addCatalogConfig.parentId = row.id
      this.addCatalogConfig.showDialog = true
      this.addCatalogConfig.title = '添加下级'
    },

    // 编辑
    edit(row) {
      if(!row) return;

      this.addCatalogConfig.rowId = row.id
      this.addCatalogConfig.showDialog = true
      this.addCatalogConfig.title = '编辑'
    },

    // 删除
    async delete(row) {
      if(!row) return;

      await goodsCatalogDelete(row.id)
      this.$message.success('删除成功')
      this.loadTreeData()
    }
  },
}
</script>